<template>
	<view>
		<!-- 预约订单类型 -->
		<u-sticky bgColor="#fff">
			<u-tabs ref="tabs" :list="list" lineWidth="40" @change="SelectProject"></u-tabs>
		</u-sticky>

		<!-- 订单列表 -->
		<view class="orders" v-if="prolist.length > 0">
			<view class="order-item" v-for="(item, index) in prolist" :key="index">
				<view><text>预约项目：</text>{{item.project.name}}</view>
				<view><text>预约时间：</text>{{item.createtime}}</view>
				<view><text>预约状态：</text>{{item.status_text}}</view>
				<view v-if="item.price">
					<text>费用：</text>{{item.price}}元
				</view>
				<view><text>预约备注：</text>{{item.content}}</view>
				<view class="action">
					<u-button @click="ToInfo(item.id)" class="item" type="primary" size="mini">详情</u-button>

					<!-- 商家已接单(已报价) -->
					<u-button @click="ToPay(item.id)" v-if="item.status == 1" class="item" type="success" size="mini">
						确认支付</u-button>

					<!-- 已支付、未服务 -->
					<u-button @click="ToCancel(item.id)" v-if="item.status == 2 || item.status == -3" class="item" type="error" size="mini">
						撤销预约</u-button>

					<!-- 已支付、待确认 -->
					<u-button @click="ToReceiving(item.id)" v-if="item.status == 2 || item.status == -3" class="item" type="success"
						size="mini">确认收货</u-button>

					<!-- 已服务、未评价 -->
					<u-button @click="ToRate(item.id)" v-if="item.status == 3 && !item.rate" class="item" type="warning"
						size="mini">评分</u-button>
				</view>
			</view>
		</view>
		<!-- 消息提示的组件 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 模态框确认撤销 -->
		<u-modal :show="showdel" showCancelButton :content='content' @confirm="confirm" ref="uModal"
			@cancel="showdel = false"></u-modal>

		<!-- 模态框确认支付 -->
		<u-modal :show="showPaydel" showCancelButton :content='contentpay' @confirm="Payconfirm" ref="uModal"
			@cancel="showPaydel = false"></u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '全部',
						status: '',
					},
					{
						name: '未接单',
						status: 0
					},
					{
						name: '已接单',
						status: 1
					},
					{
						name: '已付款',
						status: 2
					},
					{
						name: '已完成',
						status: 3
					},
					{
						name: '撤销预约',
						status: -1
					},
					{
						name: '撤销申请中',
						status: -2
					},
					{
						name: '撤销拒绝',
						status: -3
					}
				],
				prolist: [],
				LoginUser: null,
				proid: null,
				current: 0,
				showdel: false,
				content: '是否确认撤销订单?',
				id: null,
				showPaydel: false,
				contentpay: '是否确认订单支付?'
			}
		},
		onLoad() {
			//验证是否有登陆
			this.$u.auth.check()

			this.LoginUser = uni.getStorageSync('LoginUser')

			this.projectlist()

		},
		onShow(){
			this.projectlist()
		},
		methods: {
			SelectProject(val) {
				this.proid = val.status
				this.projectlist()
			},

			async projectlist() {
				let data = {
					userid: this.LoginUser.id,
					status: this.proid
				}
				let resutl = await this.$u.api.project.ProjectIndex(data)

				if (resutl.code == '1') {
					this.prolist = resutl.data
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: resutl.msg
					})

					return false
				}
			},
			// 支付
			ToPay(id) {
				this.id = id
				this.showPaydel = true
			},
			// 确认支付
			async Payconfirm() {
				this.showPaydel = false
				let data = {
					id: this.id,
					userid: this.LoginUser.id
				}
				let resutl = await this.$u.api.project.ProjectPay(data)
				if (resutl.code == '1') {
					this.$refs.uToast.show({
						type: 'success',
						message: resutl.msg,
						complete: () => {
							uni.navigateTo({
								url: '/pages/project/index'
							});
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: resutl.msg
					})
				
					return false
				}
			},

			ToCancel(id) {
				this.id = id
				this.showdel = true
			},
			// 删除
			async confirm() {
				this.showdel = false
				let data = {
					id: this.id,
					userid: this.LoginUser.id
				}
				let resutl = await this.$u.api.project.ProjectRevoke(data)
				if (resutl.code == '1') {
					this.$refs.uToast.show({
						type: 'success',
						message: resutl.msg
					})
					this.projectlist()
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: resutl.msg
					})

					return false
				}
			},
			// 跳转到评分页面
			ToRate(id) {
				uni.$u.route({
					url: 'pages/project/rate',
					params: {
						id: id
					}
				})
			},
			ToInfo(id) {
				uni.$u.route({
					url: 'pages/project/info',
					params: {
						id: id
					}
				})
			},
			// 确认收货
			async ToReceiving(id) {
				let data = {
					id: id,
					userid: this.LoginUser.id
				}
				let resutl = await this.$u.api.project.ProjectReceiving(data)
				if (resutl.code == '1') {
					this.$refs.uToast.show({
						type: 'success',
						message: resutl.msg
					})
					this.projectlist()
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: resutl.msg
					})
				
					return false
				}
			}
		}
	}
</script>


<style>
	/* pages/myOrder/myOrder.wxss */
	page {
		background-color: rgb(247, 247, 247);
		font-size: 34rpx;
	}

	.myorder {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-left: 30rpx;
	}

	.myorder text {}

	.myorder view {
		height: 2rpx;
		background-color: #CCC;
		width: auto;
	}

	.order-item {
		padding: 20rpx 20rpx;
		margin: 30rpx 0rpx;
		border-bottom: 2rpx solid #CCCCCC;
		box-shadow: 0 0 10px #DDD;
	}

	.order-item text {
		font-size: 32rpx;
	}

	.order-item .action {
		text-align: right;
		margin-top: 1em;
	}

	.order-item .action button {
		margin-right: .5em !important;
		width: 20% !important;
		display: inline-block;
		height: 26px;
		line-height: 26px;
	}

	.u-tabs__wrapper__nav__item__text {
		white-space: nowrap;
	}
	.u-modal__content__text{
		text-align: center;
	}
	/*  #ifdef APP-PLUS ||  H5  */
	/deep/.u-modal__content__text{
		text-align: center;
	}
	/*  #endif  */
</style>
